@import "../shared/helper";
.home {flex: 1;display: flex;flex-direction: column;
    background: #010310; color: white;
    font-size: px(16);
    > header {
      height: px(99);
      background-size: cover;
      width: px(2420);
      margin: 0 auto;
    }
    >footer{
        height: px(68);
        border: 1px solid #0d2d59;
        margin: px(20) 0 1px;
        border-radius: 4px;
        background: #0c0d2b;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    > main {
        width: px(2420);
        margin: 0 auto;
      padding-top: px(30);
      flex: 1;
      display: grid;
      grid-template:
        "box1 box2 box4 box5" 755fr
        "box3 box3 box4 box5" 363fr / 366fr 361fr 811fr 747fr;
      grid-column-gap: px(28);
      grid-row-gap: px(28);
      > section {text-align: center;}
      .bordered {
        border: 1px solid #0764bc;
        border-radius: 4px;
        position: relative;
        box-shadow: 0 0 2px 0 #0e325f, inset 0 0 2px 0 #0e325f;
        background: #0c1139;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          border-radius: 4px;
          box-shadow: 17px 0 0 -16px #0e325f,
          -17px 0 0 -16px #0e325f,
          0 17px 0 -16px #0e325f,
          0 -17px 0 -16px #0e325f,
          9px 0 0 -8px #0d4483,
          -9px 0 0 -8px #0d4483,
          0 9px 0 -8px #0d4483,
          0 -9px 0 -8px #0d4483,;
        }
      }
      > .section1 {
        grid-area: box1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      > .section2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        grid-area: box2;
      }
      > .section3 {
        grid-area: box3;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      > .section4 {
        grid-area: box4;
      }
      > .section5 {
        grid-area: box5;
        display: flex;
      flex-direction: column;
      justify-content: space-between;
      > .row1 {
        height: px(317);
      }
      > .row2 {
        height: px(317);
      }
      > .row3 {
        height: px(455);
      }
      }
      .管辖统计,.破获排名,.发案趋势,.案发时段,.战果, .籍贯 ,.年龄段,.案发类型, .案发街道, .作案手段 {
        height: px(315);
        display: flex;
        flex-direction: column;
        align-items: center;
        h2 {
          flex-shrink: 0;
          border: 1px solid #0a5299;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
          font-size: px(22);
          line-height: px(24);
          padding: px(10) px(28);
          text-shadow: 0 0 px(3) white;
        }
        .charts {
            width: 100%;flex: 1;
            display: flex;
          }
        .chart {
          flex: 1;
          width: 100%;
        }
      }
      .发案趋势, .案发时段{
        height: px(363);
      }
      .chart12 {
        flex: 1;display: flex; flex-direction: column;
      }
      .破获排名 {
        height: px(423);
      
        .legend {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 100%;
          padding: 0 px(20) px(10);
          > .first, > .second {
            display: inline-block;
            width: px(18); height: px(12);
            background: red; margin: 0 px(10);
          }
          .first {
            background: linear-gradient(90deg, #2034f9 0%, #04a1ff 100%);
          }
          .second {
            background: linear-gradient(90deg, #b92ae8 0%, #6773e7 100%);
          }
        }
      }
      .战果,.作案手段 {
        padding: 0 px(24);
        > table {
            width: 100%; table-layout: fixed;
            margin-top: px(25);
          border-collapse: collapse;
          th, td {
            border: 1px solid #1a3671;
          }
          thead {
            th {
              height: px(70);
              box-shadow: inset 0 0 px(60) 0 #1f3d85;
            }
          }
          tbody {
            td {height: px(50); width: px(84);
              background: #1c2456;
            }
  
          }
        }
      }
      .作案手段 {
        > table {
          tbody {
            td {
              height: px(26);
            }
          }
        }
      }
      .年龄段 {display: flex;flex-direction: column;
        height: px(363);
        > .charts {
         padding: px(30);
        }
        &-图1, &-图2, &-图3 {
          flex: 1;
          
          display: flex; flex-direction: column;
        }
        &-图1,&-图2 {
            .legend {height: px(40); display: flex; align-items: center;
                justify-content: center; flex-wrap: wrap;padding-right:px(10);
                > span {display: inline-block; width: px(16); height: px(10);
                  border-radius: px(2); margin: 0 px(10);}
                .male {background: #33a4fa;}
                .female {background: #8d70f8;}
              }
            .chart {
              position: relative;
              display: flex;
              > .main {flex: 1;}
              > .text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                color: #33a4fa; font-size: px(40); text-shadow: 0 0 px(20) #33a4fa;font-weight: bold;}
            }
        }
        &-图2 {
            width: px(290); flex-shrink: 0;
            .legend {
              justify-content: flex-start;
            }
        }
        &-图3 {
            border: 1px solid #08397d;
            h3 {font-size: px(20); color: #7ab6db; margin-top: px(6);}
        }
      }
      .籍贯 {
        height: px(753); background: transparent;
        > .wrapper {
            position: relative;width: 100%;flex: 1;
            display: flex; flex-direction: column;
            .chart {flex: 1;}
            .legend {
              position: absolute;top: px(40);left: px(20);display: flex;
              align-items: center;
              font-size: px(22); padding: px(20) px(10) px(20) 0;
              border-radius: 0;
              .icon {
                margin: 0 px(10);
                display: inline-block;
                width: px(16);
                height: px(16);
                border-radius: 50%;
                background: #1cecd9;
              }
            }
            .notes{
              position: absolute;
              bottom: px(10);
              right: px(10);
            }
          }
      }
    }
  }